<template>
  <div class="container">
    <!-- 筛选列表 -->
    <el-card class="box-card" style="margin-top:20px">
      <div slot="header" class="clearfix">
        <span>筛选列表</span>
      </div>
      <div class="text item">
        <el-form :model="queryParams" :rules="rules" ref="queryForm" :inline="true" label-width="110px">
          <el-form-item label="姓名：" prop="studentName">
            <el-input
              v-model="queryParams.studentName"
              placeholder="请输入姓名"
              clearable
              size="small"
              @keyup.enter.native="getList"
            />
          </el-form-item>
          <el-form-item label="身份证号：" prop="sfzNum">
            <el-input
              v-model="queryParams.sfzNum"
              placeholder="请输入身份证号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="准考证号：" prop="zkzNum">
            <el-input
              v-model="queryParams.zkzNum"
              placeholder="请输入准考证号"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="student ID：" prop="studentId">
            <el-input
              v-model="queryParams.studentId"
              placeholder="请输入ID"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="handleQuery"
            >查询</el-button>
            <el-button size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 表格 -->
    <el-card class="box-card" style="margin-top:20px">
      <div slot="header" class="clearfix">
        <span>考生日志列表</span>
      </div>
      <div class="text item">
        <div class="changeBtn">
          <el-button
            type="primary"
            style="float: right;"
            @click="handleExport"
          >导出Excel</el-button>
          <el-select
            v-model="queryParams.pcNo"
            placeholder="请选择机位号"
            clearable
            style="float: right;margin-right:10px;"
            @change="handleQuery"
          >
            <el-option
              v-for="(item, index) in pcNoList"
              :key="index"
              :label="`机位号：${item}`"
              :value="item"
            ></el-option>
          </el-select>
        </div>
        <el-table
          v-loading="loading"
          :data="tableList"
        >
          <el-table-column label="logID" align="center" prop="logId" />
          <el-table-column label="机位号" align="center" prop="pcNo" />
          <el-table-column label="时间" align="center" prop="time" />
          <el-table-column label="科目" align="center" prop="subjectName" />
          <el-table-column label="关联科目" align="center" prop="relSubjectName" />
          <el-table-column label="题目ID" align="center" prop="quesId" />
          <el-table-column label="纸质题号" align="center" prop="questionNo" />
          <el-table-column label="操作" align="center" prop="statTypeStr" />
          <el-table-column label="信息" align="center" prop="answerAbc" />
          <el-table-column label="结果" align="center" prop="result" />
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
  import {allLog, allPcNo, exportData} from "@/api/toolsystem/logs";
  import { downLoadZip } from "@/utils/zipdownload";
  export default {
    name: "logAnalysis",
    data() {
      let validateContent = (rule, value, callback) => {
        if(!this.queryParams.sfzNum && !this.queryParams.zkzNum && !this.queryParams.studentId){
          if(!this.queryParams.sfzNum && rule.field == 'sfzNum'){
            if(!value){
              callback(new Error('请输入身份证号'));
            }else{
              callback();
            }
          }else if(!this.queryParams.zkzNum && rule.field == 'zkzNum'){
            if(!value){
              callback(new Error('请输入准考证号'));
            }else{
              callback();
            }
          }else if(!this.queryParams.studentId && rule.field == 'studentId'){
            if(!value){
              callback(new Error('请输入ID'));
            }else{
              callback();
            }
          }else{
            callback()
          }
        }else{
          callback()
        }
      };
      return {
        loading: false, // 遮罩层
        total: 0,// 总条数
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          pcNo: null,// 机位号
          studentName: null,
          sfzNum: null,
          zkzNum: null,
          studentId: null,
        },
        rules: {
          sfzNum: [
            {
              required: true,
              validator: validateContent,
              trigger: 'blur'
            }
          ],
          zkzNum: [
            {
              required: true,
              validator: validateContent,
              trigger: 'blur'
            }
          ],
          studentId: [
            {
              required: true,
              validator: validateContent,
              trigger: 'blur'
            }
          ]
        },
        tableList: [],// 表格数据
        pcNoList: [], // 机房列表
      };
    },
    methods: {
      // 获取机房列表
      getPCList() {
        let obj = {
          sfzNum: this.queryParams.sfzNum,
          zkzNum: this.queryParams.zkzNum,
          studentId: this.queryParams.studentId
        }
        allPcNo(obj)
          .then(response => {
            this.pcNoList = response
          })
          .catch(error => {
            console.log(error);
          });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        this.$refs["queryForm"].validate(valid => {
          console.log(valid)
          if (!valid) return this.loading = false
          allLog(this.queryParams)
            .then(response => {
              console.log(response);
              this.tableList = response.rows;
              this.total = response.total;
              this.loading = false;
            })
            .catch(error => {
              this.loading = false;
              console.log(error);
            });
        })
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$refs["queryForm"].resetFields();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
        this.getPCList();
      },
      /** 导出按钮操作 */
      handleExport() {
        this.$refs["queryForm"].validate(valid => {
          console.log(valid)
          if (!valid) return this.loading = false
          let obj = {
            pcNo: this.queryParams.pcNo,
            studentName: this.queryParams.studentName,
            sfzNum: this.queryParams.sfzNum,
            zkzNum: this.queryParams.zkzNum,
            studentId: this.queryParams.studentId,
          }
          downLoadZip('/tools-log/exportData', '考生日志列表', obj);
        })
      }
    }
  };
</script>

<style scoped lang="scss">
  @import "@/assets/styles/card.scss";
  .img_cursor{
    cursor: pointer;
  }
  .changeBtn{
    height: 36px !important;
  }

</style>

